<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { IScrollBarInfo } from '@/types'
import { useInterval } from '../../../../hooks/useInterval'

interface IProps {
    intervalTime?: number // 元素展示时间（包含transitionTime）
    transitionTime?: number // 元素切换动画时间
    height?: number // 组件高度
    data: IScrollBarInfo[] // 组件展示内容
}

// withDefaults设置组件默认值
const props = withDefaults(defineProps<IProps>(), {
    intervalTime: 3000,
    transitionTime: 1000,
    height: 40
})

// vue3新特性：单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上
const heightPx = `${props.height}px`

// vue3中使用ref要先引入
const containerRef = ref()
// onMounted声明周期中操作DOM
onMounted(() => {
    const container = containerRef.value; //使用ref.value获取容器dom
    const count = container.children.length; // 容器内循环播报的条数
    const firstSwipeItem = container.children[0]; // 第一条播报dom
    container.style.height = `${count * props.height}px`; // 容器总高度
    let index = 0; // 记录再次滚动到第一条时的标记位
    useInterval(() => {
        index++;
        // 滚动到最后一个元素时，第一个元素要接到后面
        if (index >= count) {
            firstSwipeItem.style.transform = `translateY(${index * props.height}px)`;
            // 接完之后，重置整个 container 位置，实现循环效果
            const timeout = setTimeout(() => {
                firstSwipeItem.style.transform = '';
                container.style.transform = '';
                container.style.transition = '';
                // 清空定时器
                clearTimeout(timeout)
            }, props.transitionTime)
        }
        container.style.transform = `translateY(-${index * props.height}px)`; // 滚动到第 index 条时，整个容器向上移动的距离
        container.style.transition = `all linear ${props.transitionTime}ms`;
        index = index % count // 重置index
    }, props.intervalTime)
})
</script>

<template>
    <div class="home-scroll-bar">
        <div class="home-scroll-bar__swipe">
            <div ref="containerRef">
                <div class="swipe-item" v-for="v in props.data" :key="v.type">
                    <div class="scroll-bar__info" :class="`scroll-bar__info__${v.type}`">
                        <span class="info-badge">{{ v.badge }}</span>
                        <span class="info-detail" v-html="v.detail"></span>
                        <span class="info-btn op-thin-border">{{ v.btn }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.home-scroll-bar {
  --bean-color: rgb(252, 164, 40);
  --hongbao-color: rgb(252, 68, 25);
  &__swipe {
    background: white;
    border-radius: 8px;
    margin: 5px 10px;
    font-size: 13px;
    position: relative;
    overflow: hidden;
    height: v-bind(heightPx);
    .swipe-item {
      height: v-bind(heightPx);
    }
  }
  .scroll-bar__info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    height: 100%;

    .info-badge {
      border-radius: 5px;
      padding: 2px 6px;
      color: white;
      margin-right: 6px;
      font-size: 12px;
    }
    .info-detail {
      flex: 1;
    }
    .info-btn {
      padding: 3px 14px;
      font-size: 12px;
      &.op-thin-border:before {
        border-radius: 50px;
      }
    }

    .info-num {
      font-weight: bold;
      margin: 0 2px;
    }

    &__bean {
      .info-badge {
        background: var(--bean-color);
      }
      .info-btn {
        color: var(--bean-color);
        &:before {
          border-color: var(--bean-color);
        }
      }
      .info-num {
        color: var(--bean-color);
      }
    }

    &__hongbao {
      .info-badge {
        background: var(--hongbao-color);
      }
      .info-btn {
        color: var(--hongbao-color);
        &:before {
          border-color: var(--hongbao-color);
        }
      }
      .info-num {
        color: var(--hongbao-color);
      }
    }
  }
}
</style>